<template>
  <div
    :class="$style.container"
    class="signUp"
  >
    <h4 :class="$style.title">立即注册</h4>
    <group
      :gutter="0"
      :class="$style.content"
    >
      <x-input
        title="账号"
        v-model="account"
        placeholder="请输入账号"
        required is-type="email"
      ></x-input>
      <x-input
        title="密码"
        v-model="pwd"
        placeholder="请输入密码"
        type="password"
        :min="8"
        required
      ></x-input>
      <x-input
        title="用户名"
        v-model="username"
        placeholder="请输入昵称"
        required
      ></x-input>
      <div
        id="mpanel"
        style="margin-top:50px;"
      />
      <x-button
        type="primary" :disabled="isDisabled"
        @click.native="handleSignUpClick"
      >
        <div :class="$style.BtnText">注册</div>
      </x-button>
    </group>
    <div>
      <loading
        :show="showLoading"
        text="加载中..."
      ></loading>
      <alert
        v-model="showAlert"
        title="提示"
        :content="tip"
      ></alert>
    </div>
  </div>
</template>

<script>
import { Group, XInput, XButton, Loading, Alert } from 'vux'
import http from '../../APIService/http'
import { signPwd } from '../../utils/config'
import $ from 'jquery'

export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      account: '',
      pwd: '',
      username: '',
      isSuccess: false
    }
  },
  computed: {
    isDisabled () {
      let reg = /[\w]+(\.[\w]+)*@[\w]+(\.[\w])+/
      if (!this.account || (!reg.test(this.account))) {
        return true
      } else if (!this.pwd || this.pwd.length < 8) {
        return true
      } else if (!this.username) {
        return true
      } else if (!this.isSuccess) {
        return true
      }
      return false
    }
  },
  components: {
    Group,
    XInput,
    XButton,
    Loading,
    Alert
  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 100)
  },
  methods: {
    init () {
      let that = this
      $('#mpanel').slideVerify({
        type: 1, // 类型
        vOffset: 5, // 误差量，根据需求自行调整
        barSize: {
          width: '350px',
          height: '40px'
        },
        success: function () {
          that.isSuccess = true
        }
      })
    },
    async handleSignUpClick () {
      try {
        if (!this.account || !this.pwd || !this.username) {
          this.tip = '请填写完整'
          this.showAlert = true
          return false
        }
        let params = {
          account: this.account,
          password: signPwd(this.pwd),
          username: this.username
        }
        this.showLoading = true
        let res = await http.post(`/register`, params)
        if (res.code === 0) {
          this.showLoading = false
          // this.tip = '注册成功'
          // this.showAlert = true
          this.$router.push({
            path: '/'
          })
        }
      } catch (err) {
        console.log('signUp fail:', err)
        this.showLoading = false
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  padding: 10px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 20px;
  }
  .content {
    margin-top: 100px;
    button {
      margin: 50px 10px;
      background: #e36049;
      line-height: 50px;
      width: 335px !important;
      border-radius: 25px;
    }
  }
}
</style>
<style scoped>

.signUp >>> .weui-cells:after {
  height: 0px;
  border-bottom: none;
}
</style>
<style>
@import "../signUp/verify/css/verify.less";
.weui-btn_primary:not(.weui-btn_disabled):active {
  background-color: #e36049 !important;
}
</style>